/*初始化样式*/
body,h1,h2,h3,h4,h5,h6,ul,li,p,dl,dt,dd,input,table,tr,td{
    padding:0;
    margin: 0;
}
table{
    border-spacing: 0;
}
li{
    list-style: none;
}
a{
    text-decoration: none;
}
html,body{
    height: 100%;
    min-height: 100%;
    min-width: 1022px;
    /*overflow: hidden;*/
}
.show{
    display: block!important;
}
.hidde{
    display: none!important;
}
body{
    font-family: "微软雅黑";
    color: black;
    font-size:12px;
}
/*通用样式-滚动条*/
.scrollbar::-webkit-scrollbar{
    width: 8px;
}
.scrollbar::-webkit-scrollbar-thumb{
    background-color: rgb(225,225,226);
    border-radius: 5px;
}

.border-bar,.music-player{
    height: 50px;
    width: 100%;

}
.border-bar{
    background-color: rgb(198,47,47);
    position: relative;
}
.border-bar .tool-navbox .index-logo{
    line-height: 50px;
    padding-left:15px;
    float: left;
}
.border-bar .tool-navbox .rb-box{
    width: 53px;
    height:22px;
    border:1px solid rgb(168,40,40);
    box-sizing: border-box;
    float: left;
    position: absolute;
    left: 192px;
    top:50%;
    margin-top: -11px;
    border-radius: 4px;
}
/*后退*/
.border-bar .tool-navbox .rb-box .rb-back{
    width: 50%;
    height: 100%;
    background-image: url("../images/borderbar/left.png");
    background-repeat: no-repeat;
    position: absolute;
    background-position: center center;
    cursor: pointer;
}
/*前进*/
.border-bar .tool-navbox .rb-box .rb-forward{
    width: 50%;
    height: 100%;
    background-image: url("../images/borderbar/right.png");
    background-repeat: no-repeat;
    position: absolute;
    right: 0;
    background-position: center center;
    cursor: pointer;
}
.border-bar .tool-navbox .rb-box .rb-box-line{
    border-left:1px solid rgb(168,40,40);
    height: 100%;
    position: absolute;
    left: 50%;
    margin-left: -0.5px;
}
/*搜索框*/
.border-bar .tool-navbox .searchbar-box{
    width: 222px;
    position: absolute;
    left: 255px;
}
.border-bar .tool-navbox .searchbar-box dt{
    height: 50px;
}
.border-bar .tool-navbox .searchbar-box dt input::-webkit-input-placeholder{
    color: rgb(199,115,115);
}
/*搜索按钮活跃时*/
.border-bar .tool-navbox .searchbar-box dt .btn-search-active{
    background-image: url("../images/borderbar/search_hover.png");
}
.border-bar .tool-navbox .searchbar-box dt .btn-search:hover{
    background-image: url("../images/borderbar/search_hover.png");
}
.border-bar .tool-navbox .searchbar-box dt .btn-search{
    width: 12px;
    height: 22px;
    background-image: url("../images/borderbar/search_none.png");
    background-repeat: no-repeat;
    background-position: center center;
    position: absolute;
    right: 12px;
    top: 50%;
    margin-top: -11px;
    cursor: pointer;
}
.border-bar .tool-navbox .searchbar-box dt input{
    font-size:12px;
    width: 100%;
    height: 22px;
    background-color: rgb(168,40,40);
    border-width: 0;
    position: absolute;
    top: 50%;
    margin-top: -11px;
    outline: 0;
    color: #fff;
    border-radius: 11px;
    text-indent: 1em;
}
.searchbar-recommend{
    width: 222px;
    position: absolute;
    background-color: rgb(250,250,250);
    border: 1px solid rgb(201,201,201);
    border-top-width:0;
    z-index: 1;
    border-radius: 5px;
    box-shadow: 0px 0px 4px 4px rgba(0, 0, 0, 0.05);
    /*display: none;*/

}
.searchbar-recommend .triangle-up{
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 10px solid rgb(250,250,250);
    position: absolute;
    top:-10px;
    left:50%;
    margin-left: -5px;
}
/*右侧头像、设置等按钮*/
.tool-menubox{
    position: absolute;
    right: 0;
    height: 50px;
    width: 387px;
    /*background-color: rgba(196, 126, 207, 0.26);*/
}
.tool-menubox .head{
    width: 24px;
    height: 24px;
    border-radius: 50%;
    position: absolute;
    top:50%;
    margin-top: -12px;
    cursor: pointer;
}
.tool-menubox .tool-nickname{
    max-width: 97px;
    /*width: 97px;*/
    line-height: 18px;
    position: absolute;
    right:261px;
    top:50%;
    padding-right: 18px;
    margin-top: -9px;
    color: rgb(238,193,193);
    background-image: url("../images/borderbar/triangleDown.png");
    background-repeat: no-repeat;
    background-position: right center;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space: nowrap;
    box-sizing: border-box;
    cursor: pointer;
}
.tool-menubox .tool-nickname:hover{
    color: #fff;
    background-image: url("../images/borderbar/triangleDown_hover.png");
}
.btn-skin{
    width: 16px;
    height: 31px;
    background-image: url("../images/borderbar/cloth.png");
    background-repeat: no-repeat;
    background-position: center bottom;
    position: absolute;
    right:219px;
    cursor: pointer;
}
.btn-skin:hover{
    background-image: url("../images/borderbar/cloth_hover.png");
}
.btn-message{
    width: 16px;
    height: 31px;
    background-image: url("../images/borderbar/message.png");
    background-repeat: no-repeat;
    background-position: center bottom;
    position: absolute;
    right:177px;
    cursor: pointer;
}
.btn-message:hover{
    background-image: url("../images/borderbar/message_hover.png");
}
.btn-message .message-no{
    /*display: none;*/
    width: 15px;
    height:15px;
    border-radius: 50%;
    background-color: white;
    color: rgb(168,40,40);
    text-align: center;
    line-height: 15px;
    position: absolute;
    right: -7.5px;
    top:7.5px;
    border:1px solid rgb(168,40,40);
}
.btn-set{
    width: 16px;
    height: 31px;
    background-image: url("../images/borderbar/setting.png");
    background-repeat: no-repeat;
    background-position: center bottom;
    position: absolute;
    right:136px;
    cursor: pointer;
}
.btn-set:hover{
    background-image: url("../images/borderbar/setting_hover.png");
}
.line{
    width: 1px;
    height: 20px;
    border-left: 1px solid rgb(168,40,40);
    position: absolute;
    right:117px;
    top:50%;
    margin-top: -10px;
}
.btn-tomix{
    width: 16px;
    height: 31px;
    background-image: url("../images/borderbar/toMix.png");
    background-repeat: no-repeat;
    background-position: center bottom;
    position: absolute;
    right:87px;
    cursor: pointer;
}
.btn-tomix:hover{
    background-image: url("../images/borderbar/toMix_hover.png");
}
.btn-maxmal{
    width: 16px;
    height: 31px;
    background-image: url("../images/borderbar/maxmal.png");
    background-repeat: no-repeat;
    background-position: center bottom;
    position: absolute;
    right:41px;
    cursor: pointer;
}
.btn-maxmal:hover{
    background-image: url("../images/borderbar/maxmal_hover.png");
}
.btn-minimal{
    width: 16px;
    height: 26px;
    background-image: url("../images/borderbar/minimal.png");
    background-repeat: no-repeat;
    background-position: center bottom;
    position: absolute;
    right:63px;
    cursor: pointer;
}
.btn-minimal:hover{
    background-image: url("../images/borderbar/minimal_hover.png");
}
.btn-close{
    width: 16px;
    height: 31px;
    background-image: url("../images/borderbar/closeFrm.png");
    background-repeat: no-repeat;
    background-position: center bottom;
    position: absolute;
    right:18px;
    cursor: pointer;
}
.btn-close:hover{
    background-image: url("../images/borderbar/closeFrm_hover.png");
}
/*左边导航栏*/
.left-nav{
    width: 200px;
    background-color: rgb(245,245,247);
    border-right: 1px solid rgb(225,225,226);
    box-sizing: border-box;
    position: absolute;
    top:50px;
    bottom:103px;
    overflow: auto;
    color: rgb(92,92,92);
    line-height: 32px;
    text-indent: 44px ;
}
.left-nav .nav-title{
    text-indent: 10px;
    font-weight: normal;
    position: relative;
}
.nav-title+ul{
    margin-bottom: 11px;
}
.cursor-p{
    cursor: pointer;
}
/*小图标们*/
.ico-nav{
    background-repeat: no-repeat;
    background-position: 15px center;
    cursor: pointer;
    border-left: 3px solid transparent;
}
.ico-nav:hover{
    color: #000;
}
.ico-findmusic{background-image: url("../images/left_nav/music.png");}
.left-nav .ico-findmusic-click{background-image: url("../images/left_nav/music_hover.png");color: black}
.ico-findmusic:hover{background-image: url("../images/left_nav/music_hover.png");}
.ico-mylove{background-image: url("../images/left_nav/myLove.png");}
.ico-mylove:hover{background-image: url("../images/left_nav/myLove_hover.png");}
.left-nav .ico-mylove-click{background-image: url("../images/left_nav/myLove_hover.png");color: black}
.ico-mycollect{background-image: url("../images/left_nav/mycollect.png");}
.ico-mycollect:hover{background-image: url("../images/left_nav/mycollect_hover.png");}
.left-nav .ico-mycollect-click{background-image: url("../images/left_nav/mycollect_hover.png");
    color: #000;}
.ico-downmanage{background-image: url("../images/left_nav/download.png");}
.ico-downmanage:hover{background-image: url("../images/left_nav/download_hover.png");}
.left-nav .ico-downmanage-click{background-image: url("../images/left_nav/download_hover.png");
    color: #000;}
.ico-friend{background-image: url("../images/left_nav/firend.png");position: relative}  
.ico-friend:hover{background-image: url("../images/left_nav/firend_hover.png");}
.left-nav .ico-friend-click{background-image: url("../images/left_nav/firend_hover.png");
    color: #000;}
.ico-privatefm{background-image: url("../images/left_nav/fm.png");}
.ico-privatefm:hover{background-image: url("../images/left_nav/fm_hover.png");}
.left-nav .ico-privatefm-click{background-image: url("../images/left_nav/fm_hover.png");
    color: #000;}
.ico-localmusic{background-image: url("../images/left_nav/loclmusic.png");}
.ico-localmusic:hover{background-image: url("../images/left_nav/loclmusic_hover.png");}
.left-nav .ico-localmusic-click{background-image: url("../images/left_nav/loclmusic_hover.png");
    color: #000;}
.ico-musiclist{background-image: url("../images/left_nav/music_list.png");}
.ico-musiclist:hover{background-image: url("../images/left_nav/music_list_hover.png");}
.left-nav .ico-musiclist-click{background-image: url("../images/left_nav/music_list_hover.png");
    color: #000;}
.ico-mv{background-image: url("../images/left_nav/mv.png");}
.ico-mv:hover{background-image: url("../images/left_nav/mv_hover.png");}
.left-nav .ico-mv-click{background-image: url("../images/left_nav/mv_hover.png");
    color: #000;}
.ico-mycloud{background-image: url("../images/left_nav/cloudmusic.png");}
.ico-mycloud:hover{background-image: url("../images/left_nav/cloudmusic_hover.png");}
.left-nav .ico-mycloud-click{background-image: url("../images/left_nav/cloudmusic_hover.png");
    color: #000;}
.ico-myradio{background-image: url("../images/left_nav/myradio.png");}
.ico-myradio:hover{background-image: url("../images/left_nav/myradio_hover.png");}
.left-nav .ico-myradio-click{background-image: url("../images/left_nav/myradio_hover.png");
    color: #000;}
    /*歌曲信息小工具栏*/
.music-info{
    height: 40px;
    width: 187px;
    border-top: 1px solid rgb(225,225,226);
    position: absolute;
    border-right: 1px solid rgb(225,225,226);
    bottom:50px;
    /*box-sizing: border-box;*/
    padding:6px;
    background-color: rgb(245,245,247);
    cursor: pointer;
}
.music-info:hover .fullscreen{
    width: 40px;
}
.music-info .music-face{
    width: 40px;
    height: 40px;
}
.music-name{
    cursor:pointer;
}
.music-info .music-name-box{
    width: 140px;
    height: 40px;
    /*background-color: rgba(250, 235, 215, 0.18);*/
    float: right;
    position: relative;
}
.music-singer{
    cursor: pointer;
}
.music-name-box .music-singer:hover{
    color: #000;
}
/*全屏*/
.fullscreen{
    /*width: 40px;*/
    height: 40px;
    background-color: rgba(0, 0, 0, 0.44);
    background-image: url("../images/fullscreen.png");
    background-size: contain;
    position: absolute;
    z-index: 1;
    /*opacity: 0.1;*/
}
.music-name-box p{
    float: left;
    line-height: 20px;
    width: 100%;
    position: relative;
}
.music-name-box .music-singer{
    color: rgb(102,102,102);
}
.ico-love:hover{
    background-image: url("../images/lover_none_hover.png");
}
.ico-love{
    background-image: url("../images/lover_none.png");
    width: 12px;
    height: 10px;
    cursor: pointer;
    position: absolute;
    top:50%;
    margin-top: -5px;
    right: 0;
}
.ico-share:hover{
    background-image: url("../images/share_hover.png");
}
.ico-share{
    background-image: url("../images/share_none.png");
    width: 11px;
    height: 12px;
    cursor: pointer;
    position: absolute;
    top:50%;
    margin-top: -6px;
    right: 0;
}
/*播放控制器*/
.music-player{
    border-top:1px solid rgb(225,225,226) ;
    background-color: rgb(246,246,248);
    box-sizing: border-box;
    position: fixed;
    bottom:0;
}
/*中间主体内容*/
.content-box{
    position: absolute;
    top: 50px;
    bottom:50px;
    left: 200px;
    right: 0;
    overflow: auto;
    min-width: 822px;
}
.ico-play:hover{
    background-image: url("../images/ico_play_hover.png");
}
.ico-play{
    position: absolute;
    left:85px;
    background-image: url("../images/ico_play.png");
    width: 34px;
    height: 34px;
    top:50%;
    margin-top: -17px;
    cursor: pointer;
}
.ico-prevmusic:hover{
    background-image: url("../images/ico_prevmusic_hover.png");
}
.ico-prevmusic{
    position: absolute;
    left:30px;
    background-image: url("../images/ico_prevmusic.png");
    width: 30px;
    height: 30px;
    top:50%;
    margin-top: -15px;
    cursor: pointer;
}
.ico-nextmusic:hover{
    background-image: url("../images/ico_next_hover.png");
}
.ico-nextmusic{
    position: absolute;
    left:143px;
    background-image: url("../images/ico_next.png");
    width: 30px;
    height: 30px;
    top:50%;
    margin-top: -15px;
    cursor: pointer;
}
.ico-lyirc:hover{background-image: url("../images/ico_lyirc_hover.png");}
.ico-lyirc{
    position: absolute;
    right:80px;
    background-image: url("../images/ico_lyirc.png");
    width: 16px;
    height: 16px;
    top:50%;
    margin-top: -8px;
    cursor: pointer;
}
.ico-bottle{
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: rgb(198,47,47);
    position: absolute;
    top:5px;
    left:73px;
}
.ico-addmusic:hover{background-image: url("../images/left_nav/addMusicList_hover.png");}
.ico-addmusic{
    background-image: url("../images/left_nav/addMusicList.png");
    width: 14px;
    height: 14px;
    position: absolute;
    top:50%;
    margin-top:-7px;
    right: 35px;
}
.ico-showList:hover{background-image: url("../images/left_nav/showList_hover.png");}
.ico-showList{
    background-image: url("../images/left_nav/showList.png");
    width: 6px;
    height: 10px;
    position: absolute;
    top:50%;
    margin-top: -5px;
    right: 19px;
}
.ico-closeList{
    background-image: url("../images/left_nav/closeList.png");
    width: 10px;
    height: 6px;
    position: absolute;
    top:50%;
    margin-top: -3px;
    right: 19px;
}
.play-statetime{
    position: absolute;
    left:205px;
    line-height: 50px;
}
.play-progress-box{
    position: absolute;
    left:250px;
    height:4px;
    background-color: rgb(230,230,232);

    right: 340px;
    top:50%;
    margin-top: -2px;
    border-radius: 2px;
    cursor: pointer;
}
.play-progress{
    position: absolute;
    width: 50%;
    height:4px;
    border-radius: 2px;
    background-color: rgb(232,60,60);

}
.play-stateposition{
    position: absolute;
    width: 14px;
    height:14px;
    background-color: #fff;
    border: 1px solid rgb(198,198,198);
    border-radius: 50%;
    top:50%;
    margin-top: -7.5px;
    margin-left: -7.5px;
    left:50%;
    box-sizing: border-box;
    transition: all 200ms linear;
}
.play-stateposition:hover{
    box-shadow: 0px 0px 4px 4px rgba(128, 128, 128, 0.23);
}
.play-stateposition-bg{
    position: absolute;
    width: 4px;
    height: 4px;
    background-color: rgb(232,60,60);
    border-radius: 50%;
    left:50%;
    top:50%;
    margin-left: -2px;
    margin-top: -2px;
}
.play-totaltime{
    position: absolute;
    right:300px;
    line-height: 50px;
}
.ico-volume:hover{background-image: url("../images/ico_volume_hover.png");}
.ico-volume{
    background-image: url("../images/ico_volume.png");
    width: 16px;
    height: 12px;
    position: absolute;
    right: 258px;
    top:50%;
    margin-top: -6px;
    cursor: pointer;
    background-repeat: no-repeat;
}
.volume-progress-box{
    position: absolute;
    width: 100px;
    height:4px;
    background-color: rgb(230,230,232);
    right: 153px;
    top:50%;
    margin-top: -2px;
    border-radius: 2px;
    cursor: pointer;
}
.volume-progress{
    position: absolute;
    width: 50%;
    height:4px;
    border-radius: 2px;
    background-color: rgb(232,60,60);
}
.volume-progress-box:hover .volume-stateposition{
    display: block;
}
.volume-stateposition{
    position: absolute;
    width: 14px;
    height:14px;
    background-color: #fff;
    border: 1px solid rgb(198,198,198);
    border-radius: 50%;
    top:50%;
    margin-top: -7.5px;
    margin-left: -7.5px;
    left:50%;
    box-sizing: border-box;
    display: none;
}

.volume-stateposition-bg{
    position: absolute;
    width: 4px;
    height: 4px;
    background-color: rgb(232,60,60);
    border-radius: 50%;
    left:50%;
    top:50%;
    margin-left: -2px;
    margin-top: -2px;
}
.play-type:hover{background-image: url("../images/ico_playstate_order_hover.png");}
.play-type{
    background-image: url("../images/ico_playstate_order.png");
    width: 18px;
    height: 14px;
    position: absolute;
    top: 50%;
    margin-top: -7px;
    right: 115px;
    cursor: pointer;
}
.paly-list:hover{background-image: url("../images/ico_songList_hover.png");}
.paly-list{
    background-image: url("../images/ico_songList.png");
    width: 49px;
    height: 17px;
    right: 15px;
    position: absolute;
    top:50%;
    margin-top: -8.5px;
    cursor: pointer;
}
.paly-list .list-num{
    position: absolute;
    left: 22px;
    font-size: 10px;
}
.ico-nav-click{
    background-color: rgb(230,231,234);
    border-left: 3px solid rgb(198,47,47);
}
h5.nav-title.cursor-p:hover .ico-showList{
    background-image: url("../images/left_nav/showList_hover.png");
}
.ico-pause:hover{
    background-image: url("../images/ico_pause_hover.png");
}
.ico-pause{
    position: absolute;
    left:85px;
    background-image: url("../images/ico_pause.png");
    width: 34px;
    height: 34px;
    top:50%;
    margin-top: -17px;
    cursor: pointer;
}
.play-bufferprogress{
    position: absolute;
    width: 60%;
    height:4px;
    border-radius: 2px;
    background-color: rgb(194,194,196);
}
/*播放列表弹窗*/
.play-list-box{
    width: 580px;
    position: absolute;
    top:150px;
    bottom:50px;
    right: 0;
    box-shadow: 0px 0px 10px 0px #aaaaaa;
    box-sizing: border-box;
    border-top:1px solid rgb(194,194,196);
    border-left:1px solid rgb(194,194,196);
    z-index: 5;
    background-color: rgb(250,250,250);
    display: none;
}
.play-list-box .playlist-title{
    width: 100%;
    height: 40px;
    background-color: rgb(244,244,246);
    position: relative;
}
.play-list-box .playlist-title .play-list-btn{
    box-sizing: border-box;
    width: 107px;
    height: 26px;
    background-color: white;
    line-height: 24px;
    position: absolute;
    text-align: center;
    top: 50%;
    margin-top: -13px;
    border-top: 1px solid rgb(229,229,229);
    border-bottom: 1px solid rgb(229,229,229);
    color: rgb(136,136,136);
}
.play-list-box .playlist-title .play-list-btn:nth-child(1){
    border-radius: 5px 0 0 5px;
    right: 50%;
    border-left: 1px solid rgb(229,229,229);
}
.play-list-box .playlist-title .play-list-btn:nth-child(2){
    border-radius: 0 5px 5px 0;
    left: 50%;
    border-right: 1px solid rgb(229,229,229);

}
.btn-active{
    border-color: rgb(124,125,133)!important;
    background-color: rgb(124,125,133)!important;
    color: #fff!important;
}
.box-tool{
    height: 30px;
    box-sizing: border-box;
    border-top:1px solid rgb(225,225,226);
    border-bottom:1px solid rgb(225,225,226);
    line-height: 28px;
}
.list-item-box{
    position: absolute;
    bottom: 0px;
    top:70px;
    overflow-y: scroll;
}
.list-item-box table{
    width: 100%;
}
.list-item-box table tr{
    line-height: 28px;
    width: 100%;
}
.list-item-box table tr:nth-child(even){
    background-color: rgb(245,245,247);
}
/**
添加此css可显示播放三角形
 */
.ico-palying{
    width: 30px;
    background-repeat: no-repeat;
    background-position: center center;
}
.active-palynow{
    background-image: url("../images/ico_play_now.png");
}
.song-name{
    width: 340px;
}
.singer-name{
    width: 110px;
}
.ico-from{
    width: 13px;
}
.music-time{
    width: 84px;
}
.ico-close-toolbox{
    width: 28px;
    height: 28px;
    background-image:url("../images/ico_close_toolbox.png");
    background-repeat: no-repeat;
    background-position: center center;
    position: absolute;
    right: 0;
    top:50%;
    margin-top: -14px;
    cursor: pointer;
}
#music-lrc-box{
    position: absolute;
    z-index:10;
    top:50px;
    bottom:50px;
    left: 0;
    right: 100%;
    transition: all 0.4s;
}
#music-lrc-box iframe{
    width: 100%;
    height: 100%;
    overflow-y: scroll;
}
.music-lrc-box-show{
    right: 0!important;
}